<template>
	<div class="picking zy-content">
		<div class="searchBox search-box-layout">
			<Row :gutter="24">
				<!-- <Col span="4">
					<div>
						<p class="label">{{ $t('安装位置') }}</p>
						<div class="ipt">
							<Cascader :data="orgList" :transfer="true" v-model="installPositionName" @on-change="handleCasChange" />
						</div>
					</div>
				</Col> -->
				<!-- <Col span="4">
					<div>
						<p class="label">{{ $t('equipCheck.SerialNo') }}</p>
						<div class="ipt">
							<Select
								v-model="searchParams.deviceMId"
								filterable
								clearable
								:placeholder="`${$t('common.inputInfo')}${$t('equipCheck.SerialNo')}`"
								:remote-method="handleRemote"
							>
								<Option v-for="item in deviceMIdList" :value="item.deviceMId" :label="item.desc" :key="item.deviceMId" />
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('设备等级') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.deviceGrade" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option v-for="item of category" :value="item.value" :key="item.value" :label="item.label"></Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('设备类别') }}</p>
						<div class="ipt">
							<Select
								v-model="searchParams.deviceCategory"
								filterable
								clearable
								:placeholder="`${$t('common.selectInfo')}`"
								@on-change="deviceNameChange"
							>
								<Option v-for="(item, index) of deviceTypeList" :value="item.value" :key="index" :label="item.value" />
							</Select>
						</div>
					</div>
				</Col> -->
				<Col span="4">
					<div>
						<p class="label">{{ $t('点检项目') }}</p>
						<div class="ipt">
							<Input
								type="text"
								v-model="searchParams.checkName"
								:placeholder="`${$t('common.inputInfo')}`"
								class="inputBorder"
								:maxlength="32"
							></Input>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('点检周期') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.cycleUnitStr" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option v-for="(item, index) of cycle" :value="item.label" :key="index" :label="item.name"></Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('是否上传sop') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.isCheckSop" clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option v-for="item of sopTagList" :value="item.key" :key="item.key" :label="item.name"></Option>
							</Select>
						</div>
					</div>
				</Col>

				<Col span="4">
					<div>
						<p class="label hide-label">--</p>
						<div class="ipt">
							<Button class="search-btn" type="primary" @click="changeNum">{{ $t('common.Query') }}</Button>
							<Button class="reset-btn" @click="reset()">{{ $t('common.reset') }}</Button>
						</div>
					</div>
				</Col>
			</Row>
		</div>
		<div class="list-layout mt16">
			<div class="btns clear">
				<span class="title">{{ $t('common.listInformation') }}</span>
				<Button @click="createfaultCodeShowH">{{ $t('maintenance.New') }}</Button>
				<Button @click="handleBatchDelete">{{ $t('maintenance.Delete') }}</Button>
				<Button @click="handleOutRecords">
					{{ $t('maintenance.Export') }}
				</Button>
				<Button @click="batchImport">{{ $t('maintenance.Import') }}</Button>
				<Button @click="exportTemplate">
					{{ $t('maintenance.Download') }}
				</Button>
				<Button @click="getTableColumns(columns)">
					{{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}
				</Button>
			</div>
			<div class="tableContent">
				<Table
					class="resizable-table"
					border
					@on-column-width-resize="onColumnWidthResize"
					ellipsis
					ref="selection"
					:columns="columnsList"
					:data="data"
					@on-selection-change="onSelectChange"
				>
					<template slot-scope="{ row }" slot="action">
						<span class="operationBtn" @click="edit(row)">
							<i class="iconfont zy-common-bianji"></i>
							{{ $t('maintenance.Edit') }}
						</span>
						<span class="operationBtn" @click="deleteRow(row)">
							<i class="iconfont zy-common-shanchu"></i>
							{{ $t('maintenance.DeleteObj') }}
						</span>
					</template>
				</Table>
			</div>
			<div class="pageWrap mt16">
				<pageLeftTitle :total="total" :selected="delIds.length" />
				<Page
					:total="total"
					:page-size="pageSize"
					:page-size-opts="$variable.pageSizes"
					:current="pageNum"
					@on-change="changePageNum"
					@on-page-size-change="changePageSize"
					show-sizer
					show-total
				/>
			</div>
		</div>
		<addModal ref="addProjectModal" @handleSearch="searchList"></addModal>
		<!-- 删除 -->
		<Modal :mask-closable="false" v-model="delFaultCodeShowF" class="modal-title-layout" :title="`${$t('maintenance.Deleteremind')}`">
			<div class="icon red">
				<i class="iconfont zy-common-shanchu"></i>
			</div>
			<p class="title">
				<span>删除后不会影响已经生成的点检任务，是否确认删除？</span>
			</p>
			<div slot="footer">
				<Button type="default" @click="delFaultCodeShowF = false">
					{{ $t('common.Cancle') }}
				</Button>
				<Button type="primary" :loading="delLoading" @click="deleteOk">{{ $t('maintenance.Confirmed') }}</Button>
			</div>
		</Modal>
		<Modal :mask-closable="false" v-model="delBatchFaultCodeShowF" :title="`${$t('maintenance.Deleteremind')}`">
			<Row class="enableContent">
				<Col span="24" class="enableContentInner">
					<img width="95px" src="~images/event/del.png" alt />
				</Col>
				<Col span="24" class="enableTips">
					<span>{{ $t('common.deletionaffect') }}</span>
				</Col>
			</Row>
			<div slot="footer">
				<Button type="default" @click="delBatchFaultCodeShowF = false">
					{{ $t('common.Cancle') }}
				</Button>
				<Button type="primary" :loading="delBatchLoading" @click="deleteBatchOk">{{ $t('common.Save') }}</Button>
			</div>
		</Modal>
		<Modal :mask-closable="false" v-model="confirmFaultCodeShowF" :title="`${$t('fault.Confirmremind')}`">
			<Row class="enableContent">
				<Col span="24" class="enableContentInner">
					<img width="95px" src="~images/event/pair.png" alt />
				</Col>
				<Col span="24" class="enableTips">
					<span>{{ $t('common.confirmationAfter') }}</span>
				</Col>
			</Row>
			<div slot="footer">
				<Button type="default" @click="confirmFaultCodeShowF = false">
					{{ $t('common.Cancle') }}
				</Button>
				<Button type="primary" :loading="confirmLoading" @click="deleteConfirmOk">{{ $t('common.Save') }}</Button>
			</div>
		</Modal>
		<Modal :mask-closable="false" v-model="confirmBatchFaultCodeShowF" :title="`${$t('fault.Confirmremind')}`">
			<Row class="enableContent">
				<Col span="24" class="enableContentInner">
					<img width="95px" src="~images/event/pair.png" alt />
				</Col>
				<Col span="24" class="enableTips">
					<span>{{ $t('common.confirmationAfter') }}</span>
				</Col>
			</Row>
			<div slot="footer">
				<Button type="default" @click="confirmBatchFaultCodeShowF = false">
					{{ $t('common.Cancle') }}
				</Button>
				<Button type="primary" :loading="confirmBatchLoading" @click="deleteBatchConfirmOk">{{ $t('common.Save') }}</Button>
			</div>
		</Modal>
		<importExcelModal
			:importExcelStateF="importExcelState"
			v-if="importExcelState"
			url="/dms/devSpotCheck/importDevSpotCheck"
			@importExcelChange="importExcelChange"
		/>
	</div>
</template>

<script>
// import waitConfirmed from "./modal/waitConfirmed";
// import confirmed from "./modal/confirmed";
import importExcelModal from '@/components/importExcelNew.vue';
import addModal from './modal/addModal';
import fileDownload from 'js-file-download';
import recursion from '../../../util/recursion';
import toggleTableOperation from '@/mixins/toggleTableOperation';
export default {
	name: 'project',
	mixins: [toggleTableOperation],
	components: {
		// waitConfirmed,
		// confirmed,
		importExcelModal,
		addModal,
	},
	data() {
		return {
			importExcelState: false,
			deviceMIdList: [],
			deviceNameList: [],
			sopTagList: [
				{ name: '未上传', key: '否' },
				{ name: '已上传', key: '是' },
			],
			levelList: [
				{ name: '一级点检', key: 1 },
				{ name: '二级点检', key: 2 },
				{ name: '三级点检', key: 3 },
			],
			orgList: [],
			orgCodeList: [],
			status: 0,
			confirmId: '',
			delId: '',
			searchParams: {},
			total: 0,
			pageSize: 10,
			pageNum: 1,
			pageSizeOption: [10, 20, 30, 40],
			importVisible: false,
			allCheck: false,
			create: false,
			confirmBatchFaultCodeShowF: false,
			confirmBatchLoading: false,
			confirmFaultCodeShowF: false,
			confirmLoading: false,
			delFaultCodeShowF: false, //是否显示删除弹窗
			delLoading: false,
			delBatchFaultCodeShowF: false,
			delBatchLoading: false,
			formItem: {},
			delIds: [],
			category: [
				{ label: 'A', value: 'A' },
				{ label: 'B', value: 'B' },
				{ label: 'C', value: 'C' },
			],
			cycle: [
				// { name: '班次', label: '7' },
				{ name: '日', label: '1' },
				{ name: '小时', label: '8' },
			],
			columns: [
				{
					type: 'selection',
					align: 'center',
					width: 60,
				},
				{
					title: `${this.$t('点检项目')}`,
					key: 'checkName',
					width: 200,
					align: 'center',
					tooltip: true,
					resizable: true,
				},
				// {
				// 	title: `${this.$t('设备等级')}`,
				// 	key: 'deviceGrade',
				// 	minWidth: 80,
				// 	align: 'center',
				// 	resizable: true,
				// 	tooltip: true,
				// },
				{
					title: '显示顺序',
					key: 'sort',
					minWidth: 80,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				// {
				// 	title: `${this.$t('设备类别')}`,
				// 	key: 'deviceCategory',
				// 	minWidth: 180,
				// 	align: 'center',
				// 	resizable: true,
				// 	tooltip: true,
				// },
				// {
				// 	title: `${this.$t('maintenance.EquipmentNo')}`,
				// 	key: 'deviceNo',
				// 	align: 'center',
				// 	minWidth: 100,
				// 	resizable: true,
				// 	tooltip: true,
				// },
				// {
				// 	title: `${this.$t('设备名称')}`,
				// 	key: 'deviceName',
				// 	align: 'center',
				// 	minWidth: 100,
				// 	resizable: true,
				// 	tooltip: true,
				// },
				// {
				// 	title: `${this.$t('设备流水号')}`,
				// 	key: 'deviceMId',
				// 	minWidth: 130,
				// 	align: 'center',
				// 	resizable: true,
				// 	tooltip: true,
				// },
				{
					title: `${this.$t('点检周期')}`,
					key: 'cycleUnit',
					minWidth: 160,
					align: 'center',
					resizable: true,
					tooltip: true,
					render: (h, params) => {
						return h('div', [h('span', {}, params.row.cycleUnit.join(','))]);
					},
				},

				{
					title: `${this.$t('点检方式')}`,
					key: 'checkMode',
					width: 200,
					align: 'center',
					tooltip: true,
					resizable: true,
				},
				{
					title: `${this.$t('点检标准')}`,
					key: 'checkStandard',
					minWidth: 200,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('需求人数')}`,
					key: 'reqPNum',
					minWidth: 140,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('创建人')}`,
					key: 'realname',
					minWidth: 120,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('是否上传sop')}`,
					key: 'isCheckSop',
					align: 'center',
					minWidth: 130,
					resizable: true,
					tooltip: true,
				},
				// {
				// 	title: `${this.$t('安装位置')}`,
				// 	key: 'installPositionName',
				// 	align: 'center',
				// 	minWidth: 160,
				// 	tooltip: true,
				// 	resizable: true,
				// },
				{
					title: `${this.$t('创建时间')}`,
					key: 'createTime',
					minWidth: 200,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('common.operation')}`,
					slot: 'action',
					fixed: 'right',
					minWidth: 240,
					align: 'center',
				},
			],
			deviceTypeList: [],
			data: [],
		};
	},
	created() {
		this.getColumnWidth(this.columns);
		this.getTableColumns(this.columns);
		this.searchList();
		this.getFaultCategory('设备类别');
		// this.getDeviceList()
	},
	mounted() {
		this.getOrgList();
	},
	methods: {
		getOrgList() {
			this.axios({
				method: 'get',
				url: '/basic/organization/findListByToken',
				params: {},
			}).then((res) => {
				if (res.code === 200) {
					const obj = {
						label: 'name',
						value: 'code',
						children: 'children',
					};
					this.orgList = recursion.convertTree(res.data, obj);
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		debounceSerach(fn, delay) {
			let _this = this;
			return function f(...args) {
				if (_this.timeID) {
					clearTimeout(_this.timeID);
				}
				_this.timeID = setTimeout(() => {
					fn(args);
				}, delay);
			};
		},
		handleRemote(query) {
			if (!query) {
				return;
			}
			const fn = this.debounceSerach(() => {
				let _query = query.split('-');
				if (Array.isArray(_query)) _query = _query[0];
				this.axios({
					method: 'post',
					url: '/dms/device/page',
					data: {
						deviceMId: _query,
						pageNum: 1,
						pageSize: 99,
					},
				}).then((res) => {
					if (res.code === 200) {
						this.deviceMIdList = res.data.records.map((item) => {
							item.desc = item.deviceMId + '-' + item.deviceName + '-' + item.deviceNo;
							return item;
						});
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				});
			}, 300);
			fn();
		},
		handleCasChange(val) {
			this.searchParams.installPositionName = JSON.stringify(val);
		},
		getFaultCategory(name) {
			this.axios({
				method: 'get',
				url: '/dms/faultCategory/dictList',
				params: { name },
			}).then((res) => {
				if (res.code === 200) {
					this.deviceTypeList = res.data || [];
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		deviceNameChange(val) {
			if (val) {
				this.searchParams.deviceCategory = val;
			}
		},
		handleOutRecords() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				ids: this.delIds,
				...this.searchParams,
			};
			const filName = '点检项目';
			this.axios({
				method: 'post',
				url: '/dms/devSpotCheck/exportDevSpotCheck',
				responseType: 'blob',
				data: params,
			}).then((res) => {
				fileDownload(res, filName + '.xlsx');
			});
		},
		importExcelChange(val) {
			this.importExcelState = false;
			if (val === 'success') {
				this.changeNum();
				this.$Message.success('导入成功!');
			}
		},
		//下载模板
		exportTemplate() {
			const filName = '设备点检项目导入模板';
			this.axios({
				method: 'POST',
				url: '/dms/devSpotCheck/exportDevSpotCheckTemplate',
				responseType: 'blob',
			}).then((res) => {
				fileDownload(res, filName + '.xlsx');
			});
		},
		getDeviceNameList(deviceName) {
			if (deviceName) {
				this.axios({
					method: 'get',
					url: '/dms/dcmMaintainItem/selectDeviceNames',
					params: {
						deviceName,
					},
				}).then((res) => {
					if (res.code == 200) {
						this.deviceNameList = res.data.map((val) => ({
							label: val,
							value: val,
						}));
					}
				});
			}
		},
		createfaultCodeShowH() {
			this.$refs.addProjectModal.show('');
		},
		//确认
		confirm(row) {
			this.confirmId = row.id;
			this.confirmFaultCodeShowF = true;
		},
		deleteConfirmOk() {
			this.confirmLoading = true;
			this.axios({
				method: 'post',
				url: '/dms/devSpotCheck/delByIds',
				data: {
					id: this.confirmId,
				},
			})
				.then((res) => {
					if (res.code === 200) {
						this.searchList();
						this.$Message.success({
							content: '确认成功！',
							duration: 2,
							closable: true,
						});
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				})
				.finally(() => {
					this.confirmLoading = false;
					this.confirmFaultCodeShowF = false;
				});
		},
		//批量确认
		handleBatchConfirm() {
			this.confirmBatchFaultCodeShowF = true;
		},
		deleteBatchConfirmOk() {
			this.confirmBatchLoading = true;
			this.axios({
				method: 'post',
				url: '/dms/dcmMaintainItem/batchVerify',
				data: {
					ids: this.delIds,
				},
			})
				.then((res) => {
					if (res.code === 200) {
						this.searchList();
						this.$Message.success({
							content: '批量确认成功！',
							duration: 2,
							closable: true,
						});
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				})
				.finally(() => {
					this.confirmBatchLoading = false;
					this.confirmBatchFaultCodeShowF = false;
				});
		},
		edit(row) {
			this.$refs.addProjectModal.show(row);
		},
		handleDelete() {
			if (!(this.delIds && this.delIds.length)) {
				this.$Message.warning({
					content: `${this.$t('common.deleteItems')}`,
					duration: 2,
					closable: true,
				});
				return;
			}
			this.delFaultCodeShowF = true;
		},
		//删除
		deleteRow(row) {
			this.delId = row.id;
			this.delFaultCodeShowF = true;
		},
		deleteOk() {
			this.delLoading = true;
			this.axios({
				method: 'POST',
				url: '/dms/devSpotCheck/delByIds',
				data: [this.delId],
			})
				.then((res) => {
					if (res.code === 200) {
						this.searchList();
						this.$Message.success({
							content: '删除成功！',
							duration: 2,
							closable: true,
						});
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				})
				.finally(() => {
					this.delLoading = false;
					this.delFaultCodeShowF = false;
				});
		},
		//批量删除
		handleBatchDelete() {
			if (!(this.delIds && this.delIds.length)) {
				this.$Message.error(`${this.$t('common.deleteItems')}`);
				return;
			}
			this.delBatchFaultCodeShowF = true;
		},
		deleteBatchOk() {
			this.delBatchLoading = true;
			this.axios({
				method: 'post',
				url: '/dms/devSpotCheck/delByIds',
				data: this.delIds,
			})
				.then((res) => {
					if (res.code === 200) {
						this.searchList();
						this.$Message.success({
							content: '批量删除成功！',
							duration: 2,
							closable: true,
						});
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				})
				.finally(() => {
					this.delBatchLoading = false;
					this.delBatchFaultCodeShowF = false;
				});
		},
		onSelectChange(selection) {
			let myArray = [];
			selection.map((item) => {
				myArray.push(item.id);
			});

			this.delIds = myArray;
			if (selection.length > 1) {
				this.allCheck = true;
			} else {
				this.allCheck = false;
			}
		},
		handleSearch() {
			// this.status = status
			this.searchList();
		},
		reset() {
			this.searchParams = {};
			this.orgCodeList = [];
			this.changeNum();
		},
		//分页
		changeNum() {
			this.pageNum = 1;
			this.searchList();
		},
		changePageSize(pageSize) {
			this.pageSize = pageSize;
			this.searchList();
		},
		changePageNum(val) {
			this.pageNum = val;
			this.searchList();
		},
		searchList() {
			let params = {
				// status: this.status,
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.searchParams,
			};
			for (let key in this.searchParams) {
				if (this.searchParams[key]) {
					this.$set(params, key, this.searchParams[key]);
				}
			}
			this.axios({
				method: 'post',
				url: '/dms/devSpotCheck/getDevSpotCheckList',
				data: { ...params },
			}).then((res) => {
				if (res.code === 200) {
					this.data = res.data.records;
					this.total = res.data.total;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		batchImport() {
			this.importExcelState = true;
		},
	},
};
</script>

<style lang="scss">
.project {
	//background: #ffffff;
	height: calc(100vh - 150px);

	.title {
		display: flex;
		justify-content: space-between;
		font-size: 20px;
		padding: 10px;
		border-bottom: 1px solid #dddddd;

		.icon {
			display: flex;

			.creatBtnright {
				display: flex;
				align-items: center;
				font-size: 16px;

				i {
					font-size: 36px;
				}
			}
		}
	}

	.tab {
		height: calc(100% - 100px);

		.ivu-tabs-bar {
			padding-left: 30px;
		}

		.ivu-tabs-tab {
			font-size: 18px;
		}
	}
}
</style>
